<template>
  <el-dialog title="广告编辑" :visible.sync="idDetail">
    <el-form :model="form">
      <el-form-item label="id" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="编号" :label-width="formLabelWidth" required>
        <el-input v-model="form.advertNo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="位置" :label-width="formLabelWidth" required>
        <el-input v-model="form.advertLocation" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth" required>
        <el-select v-model="form.advertType">
          <el-option
            v-for="item in adverttype"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth" required>
        <el-input :value="form.order" autocomplete="off" />
      </el-form-item>
      <el-form-item label="链接地址" :label-width="formLabelWidth" required>
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="文件信息id" :label-width="formLabelWidth">
        <el-input v-model="form.fileInfoId" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="内容" :label-width="formLabelWidth" required>
        <el-input v-model="form.advertContent" autocomplete="off" />
      </el-form-item>
      <el-upload
        class="upload-demo"
        action="http://8.140.56.19:8989/group-wxapp/file/v1"
        list-type="picture-card"
        :headers="headerObj"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handleSuccess"
        multiple
        :limit="5"
        :on-exceed="handleExceed"
        :file-list="form.fileList"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="idDetail = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { advertEdit, imgDel } from '@/api/advert'
import { getToken } from '@/utils/auth'
export default {
  components: {},
  // eslint-disable-next-line vue/require-prop-types
  props: ['form', 'adverttype'],
  data() {
    return {
      idDetail: false,
      formLabelWidth: '15%',
      headerObj: {
        Authorization: 'Bearer ' + getToken(),
        Channel: 'PC'
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).then(() => {
        let id
        if (!file.response) {
          id = file.id
          this.form.fileInfoId.splice(this.form.fileInfoId.indexOf(file.id), 1)
        } else {
          id = file.response.res.id
          this.form.fileInfoId.splice(this.form.fileInfoId.indexOf(file.response.res.id), 1)
        }
        imgDel(id)
          .then((res) => {
            if (res.code === 9999) {
              this.$message.success('删除成功')
            }
          })
          .catch(() => {
            this.$message.error('删除失败')
          })
      })
    },
    handleSuccess(res, file) {
      // console.log(res.res.id)
      this.form.fileInfoId.push(res.res.id)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    submit() {
      const val = {
        advertNo: this.form.advertNo,
        advertLocation: this.form.advertLocation,
        advertContent: this.form.advertContent,
        advertType: this.form.advertType,
        url: this.form.url,
        order: this.form.order,
        fileInfoId: this.form.fileInfoId,
        id: this.form.id
      }
      console.log('val', val)
      advertEdit(val)
        .then((res) => {
          if (res.code === 9999) {
            this.$message.success('编辑成功')
            this.$emit('sonSay')
            this.idDetail = false
          }
        })
        .catch(() => {
          this.$message.error('编辑失败')
          // this.idDetail = false
        })
    }
  }
}
</script>

<style>
  .el-upload-list__item{
    width: 110px !important;
    height: 110px !important;
  }
  .el-upload--picture-card{
    width: 110px !important;
    height: 110px !important;
    line-height: 110px !important;
  }
</style>
